<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: rgba(245, 235, 235, 0.502);
            background-image: url('Image/ye\ album.jpg');
            margin: 0;
            padding: 0;
            backdrop-filter: blur(10px);
        }
        header 
        {
            background-color: rgba(42, 190, 86, 0.621);
            color: rgba(247, 247, 247);
            padding: 20px;
            text-align: center;
        }
        .container 
        {
            width: 80%;
            margin: 20px auto;
        }
        .card {
            background-color: rgba(229, 236, 241,0.5);
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: #333;
        }
        .button1 {
            background-color: #328ab0;
            color: white;
            padding: 10px 1px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        .button2 {
            background-color: #328ab0;
            color: white;
            padding: 10px 1px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        .button3 {
            background-color: #328ab0;
            color: white;
            padding: 10px 1px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        .guest1
        {
            background-color: #328ab0;
            color: white;
            padding: 10px 1px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        .button:hover 
        {
            background-color: #45a049;
        }
        #hidden-content 
        {
            display: none;
        }
        .kanye 
        {
            width: 140px;
            height: 200px;
            border-radius: 20%;
            margin-top: -150px;
            margin-left: 430px;
            
            border: 5px solid #ddd;
        }
        .messeage-post 
        {
            background-color: white;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .messeage-post h2 {
            margin-top: 0;
        }

        .messeage-post p {
            font-size: 16px;
            line-height: 1.6;
        }

        .add-post-form {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }

        .add-post-form input, .add-post-form textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .add-post-form button {
            background-color: #328ab0;
            color: white;
            padding: 10px 50px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            
        }

        .add-post-form button:hover {
            background-color: #48a5ba;
        }
    </style>
</head>
<body>

<header>
    <h1>柯维 的个人主页</h1>
</header>

<div class="container">
    <div class="card">
        <h2>关于我</h2>
        <p>柯维(2006.4.11-至今)，华南师范大学。</p>
        <p>Valve Corporate投资者，诺贝尔文学奖获奖作品阅读者，</p>
        <p>奥斯卡金像奖获奖影片观众，贵州茅台持股者，</p>
        <p>Apple  Company潜在客户。</p>
        <img src="Image/c17714ca420d418a57d29965890298a.jpg" alt="" class = "kanye">
    </div>

    <div class="card">
        <h2>联系方式</h2>
        
        <p>Email: wick20060411@gmail.com</p>
        <p>Phone: 18022309962</p>
        
    </div>

    <div class="card">
        <h2>我最近在做什么</h2>
        <p>活着就好</p>
    </div>

    <div class="card">
        <h2>
            我的标签
        </h2>
        <form id = "myform" onsubmit="return showalert();">
            <label for="name">访客姓名:</label>
            <input type="text" id="name" name="name" required>
            
            <button id = "guest1" type="submit">提交</button><br><br>
        </form>
        
        
        <button class="button1" onclick="showMessage1()">我最喜欢的歌</button>
        <div id="hidden-content1" style="display: none;">
            <p>Runaway - kanye west</p>
            <audio controls>
                <source src="audio/4227245512.mp3" type="audio/mp3">
                
            </audio>
        </div>
        <button class="button2" onclick="showMessage2()">我最喜欢的一本书</button>
        <div id="hidden-content2" style="display: none;">
            <p>《小径分岔的花园》——豪·路·博尔赫斯</p>
        </div>
        <button class="button3" onclick="showMessage3()">我最喜欢的运动员</button>
        <div id="hidden-content3" style="display: none;">
            <a href="https://en.wikipedia.org/wiki/Paul_Pierce" target="_blank">Paul Pierce #34 Celtics</a>
        </div>
        
        
        
    </div>

    <div class = "card">
        <h2>
            留言内容
        </h2>
        <div id = "messeage-posts">

        </div>

        <div class="add-post-form">
            <h3>添加留言</h3>
            <form id="messeage-form">
                <input type="text" id="title" placeholder="留言者" required><br>
                <textarea id="content" rows="5" placeholder="留言内容" required></textarea><br>
                <button type="submit">发布</button>
            </form>
        </div>

    </div>
</div>

<script>
    window.onload = function() 
    {
      const alertMessage = localStorage.getItem('alertMessage');
      if (alertMessage) 
      {
        alert(alertMessage);  // 显示从 localStorage 获取的信息
        localStorage.removeItem('alertMessage');  // 显示后删除存储的信息
      }
    };



    function showMessage1() 
    {
        var content = document.getElementById("hidden-content1");
        content.style.display = content.style.display === "none" ? "block" : "none";
    }
    function showMessage2() 
    {
        var content = document.getElementById("hidden-content2");
        content.style.display = content.style.display === "none" ? "block" : "none";
    }
    function showMessage3() 
    {
        var content = document.getElementById("hidden-content3");
        content.style.display = content.style.display === "none" ? "block" : "none";
    }
    
    function showalert()
    {
        var name = document.getElementById("name").value;
        if(name == "柯维")
    {
        alert("欢迎回来，柯维");
    }
    else
    {
        alert("你好，" + name);
    }
    }

    const Posts = [];

    const PostsContainer = document.getElementById("messeage-posts");
    const Form = document.getElementById("messeage-form");
    const titleInput = document.getElementById("title");
    const contentInput = document.getElementById("content");

    Form.addEventListener("submit", function(event) 
        {
            event.preventDefault();  

            const title = titleInput.value;
            const content = contentInput.value;

            
            const newPost = 
            {
                title: title,
                content: content
            };

            
            Posts.push(newPost);

            
            titleInput.value = "";
            contentInput.value = "";

           
            renderPosts();
        });
        function renderPosts() {
            PostsContainer.innerHTML = "";  

            Posts.forEach(post => {
                
                const postElement = document.createElement("div");
                postElement.classList.add("messeage-post");

                const postTitle = document.createElement("h2");
                postTitle.textContent = post.title;

                const postContent = document.createElement("p");
                postContent.textContent = post.content;

                postElement.appendChild(postTitle);
                postElement.appendChild(postContent);

               
                PostsContainer.appendChild(postElement);
            });
        }
        

</script>

</body>
</html>
